<template>
  <div class="bg-white _p-20">
    <a-alert
      v-if="info.payTicket"
      class="_mb-24"
      message="当前活动有付费类型，请在活动结束后24小时内处理完全部取消报名申请和报名申请，否则将无法进行资金结算。"
      banner
    />
    <div class="disFlx">
      <div class="flex-shrink-0 _mr-20">
        <img class="img" :src="info.coverUrl" alt="" />
      </div>
      <div class="linh-28" style="flex:1">
        <div class="disFlxJS">
          <div class="disFlx">
            <div class="flex-shrink-0 w-[120px]">活动名称：</div>
            <div>{{ info.title }}</div>
            <DictTag
              :options="Dict.getLocal('activityStateDict')"
              :value="String(info.activityStatus)"
              class="_ml-10"
            />
            <div>
              <a-tag color="#2db7f5" class="_ml-10">{{
                info.display === displayEnum.HIDE ? '对外隐藏' : '对外展示'
              }}</a-tag>
            </div>
          </div>
          <div>
            <a-button icon="reload" type="primary" ghost @click="$emit('refresh')">刷新数据</a-button>
          </div>
        </div>

        <div class="disFlx">
          <div class="flex-shrink-0 w-[120px]">活动地点：</div>
          <div>{{ info.addressName }}</div>
        </div>
        <div class="disFlx">
          <div class="flex-shrink-0 w-[120px]">报名费用：</div>
          <div v-if="info.minPrice == info.maxPrice && info.maxPrice" style="color:red">
            {{ formatMoney({ money: info.minPrice, isShowFree: false }) }}
          </div>
          <div v-else-if="!info.maxPrice" style="color:red"> {{ formatMoney({ money: info.maxPrice, isShowFree: false }) }}</div>
          <div v-else style="color:red">
            {{ formatMoney({ money: info.minPrice, isShowFree: false }) }}
            ~
            {{ formatMoney({ money: info.maxPrice, isShowFree: false, symbol: '' }) }}
          </div>
        </div>
        <div class="disFlx">
          <div class="flex-shrink-0 w-[120px]">创建时间：</div>
          <div>{{ info.createTime }}</div>
        </div>
        <div class="disFlx">
          <div class="flex-shrink-0 w-[120px]">活动时间：</div>
          <div>{{ info.startTime + ' ~ ' + info.endTime }}</div>
        </div>
      </div>
    </div>
    <div class="buttons">
      <!-- <a-button v-if="disabled" type="primary" @click="goActivityUpdate">查看活动配置</a-button> -->
      <a-button v-if="isEdit" type="primary" @click="goActivityUpdate">编辑活动</a-button>
      <a-button v-else type="primary" @click="goActivityUpdate">查看活动配置</a-button>

      <a-button v-if="!disabled" type="primary" @click="goInformation">签到码/物料管理</a-button>
      <a-button v-if="showMessage" type="primary" @click="$emit('sendMessage')">发消息邀约</a-button>
      <a-button v-if="!disabled" type="primary" @click="handleMenuClick({ key: 2 })"> 活动安排 </a-button>
      <!-- <a-button v-if="!disabled" type="primary" @click="handleMenuClick({ key: 1 })"> 签到码/胸卡打印管理 </a-button> -->
      <!-- <a-button v-if="!disabled" type="primary" @click="dwSginCode"> 签到码下载 </a-button> -->
      <a-button v-if="!disabled" type="primary" @click="goCoOrganizer">协办组织</a-button>
      <a-button type="primary" @click="$refs.ShareModal.openModel(info.id, '分享推广')">分享推广</a-button>
      <a-dropdown>
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item v-if="!disabled" :key="8"> 举办单位设置 </a-menu-item>
          <a-menu-item v-if="!disabled && !isEnd" :key="5"> 取消活动 </a-menu-item>
          <a-menu-item :key="6"> {{ info.display === displayEnum.HIDE ? '对外展示' : '对外隐藏' }} </a-menu-item>
          <a-menu-item v-if="!disabled" :key="7"> 删除活动 </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px" size="default"> 更多操作 <a-icon type="down" /> </a-button>
      </a-dropdown>
    </div>
    <!-- 分享活动 -->
    <ShareModal ref="ShareModal" />
  </div>
</template>

<script>
import DictTag from '@/components/DictTag'
import {
  activityStatusEnum,
  publishStatusEnum,
  activityTypeEnum,
  displayEnum,
  ActivitySettlementStatusEnum
} from '@/enums/activity'
import { generateUrlLink } from '@/api/activity/activity.js'
import ShareModal from '@/components/ShareModal/index.vue'
import { formatMoney } from '@/utils/number'
export default {
  components: {
    DictTag,
    ShareModal
  },
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    disabled() {
      return this.info.activityType === activityTypeEnum.other_join // 协办方
    },

    isEdit() {
      return (
        ![
          ActivitySettlementStatusEnum.PROGRESS,
          ActivitySettlementStatusEnum.SUCCESS,
          ActivitySettlementStatusEnum.PART_SUCCESS
        ].includes(this.info.settleStatus) && !this.disabled
      )
    },
    // 活动是否已结束或者已取消
    isEnd() {
      return (
        this.info.activityStatus === activityStatusEnum.END || this.info.activityStatus === activityStatusEnum.CANCEL
      )
    },
    // 是否显示发消息
    showMessage() {
      return this.info.publishStatus === publishStatusEnum.ISSUE && !this.isEnd
    }
  },
  data() {
    return {
      ActivitySettlementStatusEnum,
      displayEnum
    }
  },
  methods: {
    formatMoney,
    async handleMenuClick(val) {
      const { key } = val
      switch (key) {
        case 1:
          // 签到码/胸卡打印管理
          this.$router.push({
            path: '/activity/activityConfig',
            query: { activityId: this.info.id, key: 'sign' }
          })
          break
        case 2:
          // 活动安排
          this.$router.push({
            path: '/activity/activitySeatingPlan',
            query: {
              id: this.info.id,
              title: this.info.title
            }
          })
          break
        case 5:
          this.$emit('openCancelActivityModal')
          break
        case 6:
          this.$emit('toggleDisplay')
          break
        case 7:
          this.$emit('openDeleteModal')
          break
        case 8:
          this.$emit('openOrganizationLabel')
          break
        default:
          break
      }
    },
    // 编辑活动
    goActivityUpdate() {
      this.$router.push({
        path: '/activity/activityUpdate',
        query: { activityId: this.info.id, timestamp: Date.now() }
      })
    },
    // 活动信息收集
    goInformation() {
      this.$router.push({
        path: '/activity/activityConfig',
        query: { activityId: this.info.id, key: 'sign' }
      })
    },
    goCoOrganizer() {
      this.$router.push({
        path: '/activity/coOrganizer',
        query: {
          activityId: this.info.id
        }
      })
    }
    // dwSginCode() {
    //   getActivitySignQrcode(this.info.id).then(res=>{
    //     window.open(res.data, '_self')
    //   })
    // }
  }
}
</script>

<style lang="less" scoped>
.img {
  width: 220px;
  height: 140px;
  object-fit: contain;
}

.buttons {
  .ant-btn {
    margin-top: 10px;
  }

  .ant-btn + .ant-btn {
    margin-left: 5px;
  }
}
</style>
